<template>
    <view class="material-stats-page">

        <view class="container">
            <!-- type 支持 line / column / pie / radar / gauge / arcbar / area / ... -->
            <qiun-data-charts  type="arcbar" :chartData="chartData" background="none" :opts="opts" />
        </view>
        <view class="container">
            <!-- type 支持 line / column / pie / radar / gauge / arcbar / area / ... -->
            <qiun-data-charts  type="line" :chartData="chartData" background="none" :opts="opts" />
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 定义图表数据类型
type ChartData = {
    categories: string[]
    series: {
        name: string
        data: number[]
    }[]
}

// 定义配置项类型
type ChartOpts = {
    color: string[]
    padding: number[]
    legend: { show: boolean }
    xAxis: { disableGrid: boolean }
    yAxis: { gridType: string }
    fontColor: string

}

// 初始化图表数据
const chartData = ref<ChartData>({
    categories: [],
    series: []
})

// 个性化配置（可选）
const opts = ref<ChartOpts>({
    color: ["#1890FF", "#91CB74"],
    padding: [15, 15, 0, 5],
    legend: { show: true },
    xAxis: { disableGrid: true },
    yAxis: { gridType: "dash" },
    fontColor: "#FFFFFF", // 白色字体

})

// 组件挂载后异步获取数据
onMounted(() => {
    // 异步获取数据后填充
    setTimeout(() => {
        chartData.value = {
            categories: ["1月", "2月", "3月", "4月"],
            series: [{ name: "销售额", data: [35, 59, 28, 47] }, { name: "成本", data: [25, 39, 28, 27] }, { name: "利润", data: [15, 29, 18, 27] }],
        }
    }, 300)
})
</script>

<style>
.material-stats-page {
    display: flex;
}

.container {
    width: 45%;
    padding: 20rpx;
        box-shadow: inset 0px 0px 15px 15px #00364e;
        background-color: rgba(15, 30, 61, 1.0); 
    border: 1px solid #0e659f;
}
</style>